<template>
  <div class="phone_nav">
    <div class="top_nav" id="backcolor">
      <router-link to="javascript:void(0);" class="top_left">
        <img src="../assets/image/logo.png" alt="" />
      </router-link>
      <div class="top_right">
        <img
          src="../assets/image/nav.png"
          class="navicon"
          alt=""
          @click="drawer = !drawer"
        />
        <el-drawer :visible.sync="drawer" :with-header="false" size="70%"  ref="drawer">
          <ul class="none_ul">
            <li><router-link to="index" @click="close">首页</router-link></li>
            <li><router-link to="about" @click="close">关于我们</router-link></li>
            <li><router-link to="shop" @click="close">商城小程序</router-link></li>
            <li><router-link to="seafood" @click="close">生鲜小程序</router-link></li>
            <li><router-link to="caseshow" @click="close">案例展示</router-link></li>
            <li class="many">
              <div class="many_item" @click="ifsever = !ifsever">
                <router-link to="Service">项目服务</router-link>
                <i class="el-icon-arrow-down down_icon"></i>
              </div>
              <div class="manyitem_son" v-show="ifsever">
                <router-link to="gzxcxtop">--小程序开发</router-link>
                <router-link to="/service?port=ser1">--网站建设</router-link>
                <router-link to="/service?port=ser2">--电商平台</router-link>
              </div>
            </li>
            <li><router-link to="Contact">关于我们</router-link></li>
          </ul>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PhoneNav",
  data() {
    return {
      drawer: false,
      ifsever: false,
      im: require("../assets/image/seafood/shenxianbj.jpg"),
    };
  },
  props: ["backcolor",'type'],
  mounted() {
    console.log(this.type);
    let path = this.backcolor;
    if (path) {
      let dom = document.getElementById("backcolor");
      if (this.type == "" || this.type == "image") {
        this.im = require("@/assets/image/" + path);
        dom.style.background = "url(" + this.im + ")";
      } else {
        dom.style.background = path;
      }
    }
  },
  methods:{
    close(){
      this.$refs.drawer.closeDrawer()
    },
  }
};
</script>

<style scoped lang="less">
a {
  text-decoration: none;
}
ul {
  padding: 0;
}
.top_nav {
  height: 50px;
  width: 100%;

  display: flex;
  justify-content: space-between;
  background-size: 100%;
  padding: 5px 0;
  overflow: hidden;
  .top_left {
    width: 40%;
    height: 50px;
    display: flex;
    align-content: center;
    padding-left: 2%;
    img {
      object-fit: contain;
    }
  }
  .top_right {
    width: 30%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 2%;
    .navicon {
      width: 25px;
      height: 25px;
    }
    .none_ul {
      margin: 0;
      li {
        border-bottom: 1px solid #ccc;        
        text-align: left;
        a {
          font-size: 18px;
          color: #333;
          display: inline-block;
          width: 100%;
          padding: 10px 6px;
        }
      }
      .many {
        width: 100%;
        .many_item {
          width: 95%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          // padding: 0 0 10px 0;
          a {
            font-size: 18px;
            width: 30%;
          }
          .down_icon {
            font-size: 16px;
            color: #333;
          }
        }

        .manyitem_son {
          display: flex;
          flex-direction: column;
          a {
            display: block;
            padding: 10px 0 0;
          }
        }
      }
    }
  }
}
</style>